var FormImageCrop = function () {

    var demo1 = function () {
        $('#demo1').Jcrop();
    }

    var demo2 = function () {
        var jcrop_api;

        $('#demo2').Jcrop({
            onChange: showCoords,
            onSelect: showCoords,
            onRelease: clearCoords
        }, function () {
            jcrop_api = this;
            jcrop_api.animateTo([50, 50, 200, 200]);
            jcrop_api.setOptions({aspectRatio: 1 / 1});
            jcrop_api.focus();
        });

        $('#coords').on('change', 'input', function (e) {
            var x1 = $('#x1').val(),
                x2 = $('#x2').val(),
                y1 = $('#y1').val(),
                y2 = $('#y2').val();
            jcrop_api.setSelect([x1, y1, x2, y2]);
        });

        // Simple event handler, called from onChange and onSelect
        // event handlers, as per the Jcrop invocation above
        function showCoords(c) {
            DragonCordUpdate(c);
//            $('#x1').val(c.x);
//            $('#y1').val(c.y);
//            $('#x2').val(c.x2);
//            $('#y2').val(c.y2);
//            $('#w').val(c.w);
//            $('#h').val(c.h);
        };

        function clearCoords() {
            $('#coords input').val('');
        };
    }

    var demo3 = function () {
        // Create variables (in this scope) to hold the API and image size
        var jcrop_api,
            boundx,
            boundy,
            // Grab some information about the preview pane
            $preview = $('#preview-pane'),
            $pcnt = $('#preview-pane .preview-container'),
            $pimg = $('#preview-pane .preview-container img'),

            xsize = $pcnt.width(),
            ysize = $pcnt.height();

        console.log('init', [xsize, ysize]);

        $('#demo3').Jcrop({
            onChange: updatePreview,
            onSelect: updatePreview,
            aspectRatio: xsize / ysize
        }, function () {
            // Use the API to get the real image size
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];
            // Store the API in the jcrop_api variable
            jcrop_api = this;
            // Move the preview into the jcrop container for css positioning
            $preview.appendTo(jcrop_api.ui.holder);
        });

        function updatePreview(c) {
            if (parseInt(c.w) > 0) {
                var rx = xsize / c.w;
                var ry = ysize / c.h;

                $pimg.css({
                    width: Math.round(rx * boundx) + 'px',
                    height: Math.round(ry * boundy) + 'px',
                    marginLeft: '-' + Math.round(rx * c.x) + 'px',
                    marginTop: '-' + Math.round(ry * c.y) + 'px'
                });
            }
        };
    }

    var demo4 = function () {
        var jcrop_api;

        $('#demo4').Jcrop({
            bgFade: true,
            bgOpacity: .2,
            setSelect: [60, 70, 540, 330]
        }, function () {
            jcrop_api = this;
        });

        $('#fadetog').change(function () {
            jcrop_api.setOptions({
                bgFade: this.checked
            });
        }).attr('checked', true);
        Metronic.updateUniform('#fadetog');

        $('#shadetog').change(function () {
            if (this.checked) $('#shadetxt').slideDown();
            else $('#shadetxt').slideUp();
            jcrop_api.setOptions({
                shade: this.checked
            });
        }).attr('checked', false);

        // Define page sections
        var sections = {
            bgc_buttons: 'Change bgColor',
            bgo_buttons: 'Change bgOpacity',
            anim_buttons: 'Animate Selection'
        };
        // Define animation buttons
        var ac = {
            anim1: [217, 122, 382, 284],
            anim2: [20, 20, 580, 380],
            anim3: [24, 24, 176, 376],
            anim4: [347, 165, 550, 355],
            anim5: [136, 55, 472, 183]
        };
        // Define bgOpacity buttons
        var bgo = {
            Low: .2,
            Mid: .5,
            High: .8,
            Full: 1
        };
        // Define bgColor buttons
        var bgc = {
            R: '#900',
            B: '#4BB6F0',
            Y: '#F0B207',
            G: '#46B81C',
            W: 'white',
            K: 'black'
        };
        // Create fieldset targets for buttons
        for (i in sections)
            insertSection(i, sections[i]);

        function create_btn(c) {
            var $o = $('<button />').addClass('btn small');
            if (c) $o.append(c);
            return $o;
        }

        var a_count = 1;
        // Create animation buttons
        for (i in ac) {
            $('#anim_buttons .btn-group')
                .append(
                    create_btn(a_count++).click(animHandler(ac[i])),
                    ' '
                );
        }

        $('#anim_buttons .btn-group').append(
            create_btn('Bye!').click(function (e) {
                $(e.target).addClass('active');
                jcrop_api.animateTo(
                    [300, 200, 300, 200],
                    function () {
                        this.release();
                        $(e.target).closest('.btn-group').find('.active').removeClass('active');
                    }
                );
                return false;
            })
        );

        // Create bgOpacity buttons
        for (i in bgo) {
            $('#bgo_buttons .btn-group').append(
                create_btn(i).click(setoptHandler('bgOpacity', bgo[i])),
                ' '
            );
        }
        // Create bgColor buttons
        for (i in bgc) {
            $('#bgc_buttons .btn-group').append(
                create_btn(i).css({
                    background: bgc[i],
                    color: ((i == 'K') || (i == 'R')) ? 'white' : 'black'
                }).click(setoptHandler('bgColor', bgc[i])), ' '
            );
        }

        // Function to insert named sections into interface
        function insertSection(k, v) {
            $('#interface').prepend(
                $('<fieldset></fieldset>').attr('id', k).append(
                    $('<h4></h4>').append(v),
                    '<div class="btn-toolbar"><div class="btn-group"></div></div>'
                )
            );
        };

        // Handler for option-setting buttons
        function setoptHandler(k, v) {
            return function (e) {
                $(e.target).closest('.btn-group').find('.active').removeClass('active');
                $(e.target).addClass('active');
                var opt = {};
                opt[k] = v;
                jcrop_api.setOptions(opt);
                return false;
            };
        };

        // Handler for animation buttons
        function animHandler(v) {
            return function (e) {
                $(e.target).addClass('active');
                jcrop_api.animateTo(v, function () {
                    $(e.target).closest('.btn-group').find('.active').removeClass('active');
                });
                return false;
            };
        };

        $('#bgo_buttons .btn:first,#bgc_buttons .btn:last').addClass('active');
        $('#interface').show();
    }

    var demo5 = function () {
        // The variable jcrop_api will hold a reference to the
        // Jcrop API once Jcrop is instantiated.
        var jcrop_api;

        // In this example, since Jcrop may be attached or detached
        // at the whim of the user, I've wrapped the call into a function
        initJcrop();

        // The function is pretty simple
        function initJcrop()//{{{
        {
            // Hide any interface elements that require Jcrop
            // (This is for the local user interface portion.)
            $('.requiresjcrop').hide();

            // Invoke Jcrop in typical fashion
            $('#demo5').Jcrop({
                onRelease: releaseCheck
            }, function () {

                jcrop_api = this;
                jcrop_api.animateTo([100, 100, 400, 300]);

                // Setup and dipslay the interface for "enabled"
                $('#can_click,#can_move,#can_size').attr('checked', 'checked');
                Metronic.updateUniform('#can_click,#can_move,#can_size');

                $('#ar_lock,#size_lock,#bg_swap').attr('checked', false);
                Metronic.updateUniform('#ar_lock,#size_lock,#bg_swap');

                $('.requiresjcrop').show();

            });

        };
        //}}}

        // Use the API to find cropping dimensions
        // Then generate a random selection
        // This function is used by setSelect and animateTo buttons
        // Mainly for demonstration purposes
        function getRandom() {
            var dim = jcrop_api.getBounds();
            return [
                Math.round(Math.random() * dim[0]),
                Math.round(Math.random() * dim[1]),
                Math.round(Math.random() * dim[0]),
                Math.round(Math.random() * dim[1])
            ];
        };

        // This function is bound to the onRelease handler...
        // In certain circumstances (such as if you set minSize
        // and aspectRatio together), you can inadvertently lose
        // the selection. This callback re-enables creating selections
        // in such a case. Although the need to do this is based on a
        // buggy behavior, it's recommended that you in some way trap
        // the onRelease callback if you use allowSelect: false
        function releaseCheck() {
            jcrop_api.setOptions({allowSelect: true});
            $('#can_click').attr('checked', false);
            Metronic.updateUniform('#can_click');
        };

        // Attach interface buttons
        // This may appear to be a lot of code but it's simple stuff
        $('#setSelect').click(function (e) {
            // Sets a random selection
            jcrop_api.setSelect(getRandom());
        });
        $('#animateTo').click(function (e) {
            // Animates to a random selection
            jcrop_api.animateTo(getRandom());
        });
        $('#release').click(function (e) {
            // Release method clears the selection
            jcrop_api.release();
        });
        $('#disable').click(function (e) {
            // Disable Jcrop instance
            jcrop_api.disable();
            // Update the interface to reflect disabled state
            $('#enable').show();
            $('.requiresjcrop').hide();
        });
        $('#enable').click(function (e) {
            // Re-enable Jcrop instance
            jcrop_api.enable();
            // Update the interface to reflect enabled state
            $('#enable').hide();
            $('.requiresjcrop').show();
        });
        $('#rehook').click(function (e) {
            // This button is visible when Jcrop has been destroyed
            // It performs the re-attachment and updates the UI
            $('#rehook,#enable').hide();
            initJcrop();
            $('#unhook,.requiresjcrop').show();
            return false;
        });
        $('#unhook').click(function (e) {
            // Destroy Jcrop widget, restore original state
            jcrop_api.destroy();
            // Update the interface to reflect un-attached state
            $('#unhook,#enable,.requiresjcrop').hide();
            $('#rehook').show();
            return false;
        });

        // Hook up the three image-swapping buttons
        $('#img1').click(function (e) {
            $(this).addClass('active').closest('.btn-group')
                .find('button.active').not(this).removeClass('active');

            jcrop_api.setImage('../../assets/global/plugins/jcrop/demos/demo_files/sago.jpg');
            jcrop_api.setOptions({bgOpacity: .6});
            return false;
        });
        $('#img2').click(function (e) {
            $(this).addClass('active').closest('.btn-group')
                .find('button.active').not(this).removeClass('active');

            jcrop_api.setImage('../../assets/global/plugins/jcrop/demos/demo_files/pool.jpg');
            jcrop_api.setOptions({bgOpacity: .6});
            return false;
        });
        $('#img3').click(function (e) {
            $(this).addClass('active').closest('.btn-group')
                .find('button.active').not(this).removeClass('active');

            jcrop_api.setImage('../../assets/global/plugins/jcrop/demos/demo_files/sago.jpg', function () {
                this.setOptions({
                    bgOpacity: 1,
                    outerImage: '../../assets/global/plugins/jcrop/demos/demo_files/sagomod.jpg'
                });
                this.animateTo(getRandom());
            });
            return false;
        });

        // The checkboxes simply set options based on it's checked value
        // Options are changed by passing a new options object

        // Also, to prevent strange behavior, they are initially checked
        // This matches the default initial state of Jcrop

        $('#can_click').change(function (e) {
            jcrop_api.setOptions({allowSelect: !!this.checked});
            jcrop_api.focus();
        });
        $('#can_move').change(function (e) {
            jcrop_api.setOptions({allowMove: !!this.checked});
            jcrop_api.focus();
        });
        $('#can_size').change(function (e) {
            jcrop_api.setOptions({allowResize: !!this.checked});
            jcrop_api.focus();
        });
        $('#ar_lock').change(function (e) {
            jcrop_api.setOptions(this.checked ?
                {aspectRatio: 4 / 3} : {aspectRatio: 0});
            jcrop_api.focus();
        });
        $('#size_lock').change(function (e) {
            jcrop_api.setOptions(this.checked ? {
                minSize: [80, 80],
                maxSize: [350, 350]
            } : {
                minSize: [0, 0],
                maxSize: [0, 0]
            });
            jcrop_api.focus();
        });

    }

    var demo6 = function () {
        var api;

        $('#demo6').Jcrop({
            // start off with jcrop-light class
            bgOpacity: 0.5,
            bgColor: 'white',
            addClass: 'jcrop-light'
        }, function () {
            api = this;
            api.setSelect([130, 65, 130 + 350, 65 + 285]);
            api.setOptions({bgFade: true});
            api.ui.selection.addClass('jcrop-selection');
        });

        $('#buttonbar').on('click', 'button', function (e) {
            var $t = $(this), $g = $t.closest('.btn-group');
            $g.find('button.active').removeClass('active');
            $t.addClass('active');
            $g.find('[data-setclass]').each(function () {
                var $th = $(this), c = $th.data('setclass'),
                    a = $th.hasClass('active');
                if (a) {
                    api.ui.holder.addClass(c);
                    switch (c) {
                        case 'jcrop-light':
                            api.setOptions({bgColor: 'white', bgOpacity: 0.5});
                            break;

                        case 'jcrop-dark':
                            api.setOptions({bgColor: 'black', bgOpacity: 0.4});
                            break;

                        case 'jcrop-normal':
                            api.setOptions({
                                bgColor: $.Jcrop.defaults.bgColor,
                                bgOpacity: $.Jcrop.defaults.bgOpacity
                            });
                            break;
                    }
                } else api.ui.holder.removeClass(c);
            });
        });
    }

    var demo7 = function () {
        // I did JSON.stringify(jcrop_api.tellSelect()) on a crop I liked:
        var c = {"x": 13, "y": 7, "x2": 487, "y2": 107, "w": 474, "h": 100};

        $('#demo7').Jcrop({
            bgFade: true,
            setSelect: [c.x, c.y, c.x2, c.y2]
        });
    }

    var demo8 = function () {
        $('#demo8').Jcrop({
            aspectRatio: 1,
            onSelect: updateCoords
        });

        function updateCoords(c) {
            $('#crop_x').val(c.x);
            $('#crop_y').val(c.y);
            $('#crop_w').val(c.w);
            $('#crop_h').val(c.h);
        };

        $('#demo8_form').submit(function () {
            if (parseInt($('#crop_w').val())) return true;
            alert('Please select a crop region then press submit.');
            return false;
        });

    }

    var handleResponsive = function () {
        if ($(window).width() <= 1024 && $(window).width() >= 678) {
            $('.responsive-1024').each(function () {
                $(this).attr("data-class", $(this).attr("class"));
                $(this).attr("class", 'responsive-1024 col-md-12');
            });
        } else {
            $('.responsive-1024').each(function () {
                if ($(this).attr("data-class")) {
                    $(this).attr("class", $(this).attr("data-class"));
                    $(this).removeAttr("data-class");
                }
            });
        }
    }

    return {
        //main function to initiate the module
        init: function () {

            if (!jQuery().Jcrop) {
                ;
                return;
            }

            Metronic.addResizeHandler(handleResponsive);
            handleResponsive();

            //demo1();
            demo2();
            //demo3();
            //demo4();
            //demo5();
            //demo6();
            //demo7();
            //demo8();
        }

    };

}();